<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css基础</title>
    <!--外部样式-->
    <link href="11css基础.css" rel="stylesheet" type="text/css">
    <!--行内样式-->
    <!--<style>-->
        <!--body{-->
            <!--background-color: #4a77d4;-->
        <!--}-->
    <!--</style>-->
</head>

<!--优先级高 内部样式-->
<body style="background-color: #4a77d4">
    <h1>Hello World</h1>
</body>
</html>


<!--
(了解)css介绍: cascading stylesheet,层叠样式表，专门控制html网页元素的外观样式，包括大小、颜色、布局等方面。

语法: 选择器{css表达式} 。 大括号表示语句块，css表达式;号结尾。
行内样式: 标签内写style属性，属性值写css语句。优点是测试书写方便，缺点是写多之后页面耦合度高，可读性差，不好维护
内部样式: style标签，一般写在head标签下。
外部样式: 写一个.css文件，然后再html页面中引用。link标签引用，rel属性relation。 优点，耦合度低，易于维护，比较css语句多的情况。

text-decoration: underline;  下划线
text-shadow: 10px 20px 7px #000000;   文字阴影
font-weight: bold;   加粗
background-repeat: no-repeat; 图片不重复
background:url("图3.jpg");  CSS背景图片添加

<embed src="曾惜 - 讲真的 [mqms2].mp3" width="0" height="0" autostart="true" volume="0">  背景音乐代码


样式优先级: 从高到低。  行内样式> 内部样式>外部引用
场景：行内样式和内部样式适合css代码少，html简单的情况；外部样式适合css语句多，大型项目。


CDN: Content Delivery Network,既内容分发网络。之前我们写的CSS都是引用本地，以后使用别人的CSS代码时,一种方式是复制别人的代码到自己的项目，但更简便的方式是请求别人的服务器随网页在线下和加载，但在线请求网站服务器css，js资源仍有问题，服务器压力比较大、离得远的服务器传输速度慢。CDN应运而生，原理是服务器上比较常用的CSS，js资源缓存到全国各个cdn服务器节点，当某个人访问网站时，会从最近的cdn节点获取数据，从而提升访问速度。
(了解)图片格式:png无损图片，画质好但大，支持同名，jpg，有损压缩，体积大大减少画质轻度损耗，gif更好的压缩格式、支持动图多帧。网速慢时先加载一部分。
(了解) 字体图标: 原来网页中的图标都是先用ps之类的工具做好jpg、png格式图片再插入网页中，而现在一些网页图标的源代码使用i标签(字体)插入的。电脑中的字体，例如微软雅黑，是事先定义好的  由数据算法绘制出来的矢量图形。 所以人们用做矢量字体的方式做了一套图标，在网页中i标签插入  定义class对应不同图标代码。字体图标的好处是体积小，放大缩小不失真
(了解)SVG：矢量图标，有html代码定义，除了体积小，放大缩小不失真的优点，功能比字体图标更加复杂，可以复杂图表，缺点学习成本高预览不方便。
-->